<template>
  <div class="spacelist-con table-gl-w">
    <div class="search-con search-w">
      <FilterTable :filterItem="filterItem" :isReset="true" @search="searchByVal" />
    </div>
    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="refresh">
        <template #headerLeft>
          <a-button style="margin-right: 10px" type="primary" size="medium" v-if="$authPass('inventory.location.save')" @click="batch.visible = true">批量添加货位</a-button>
          <a-button style="margin-right: 10px" type="primary" size="medium" v-if="$authPass('inventory.location.save')" @click="single.visible = true">单个添加货位</a-button>
          <a-button style="margin-right: 10px" type="primary" size="medium" @click="editRemark('mul')" v-if="$authPass('inventory.location.edit')">批量备注名</a-button>
          <a-button style="margin-right: 10px" class="gray-outline" size="medium" @click="del('mul')" v-if="$authPass('inventory.location.edit')">删除</a-button>
        </template>
        <template #tableBody>
          <a-table size="mini" class="table-two-line show-border-table" ref="table" :loading="loading" row-key="id" v-model:selected-keys="selectList" :row-selection="rowSelection" :columns="columns" :data="tableList" :pagination="false" :scroll="{ x: '100%', y: '100%' }">
            <template #columns>
              <a-table-column v-for="item of columns" :title="item.title" :align="item.align" :data-index="item.dataIndex" :width="item.width">
                <template v-if="item.title == '序号'" #cell="{ rowIndex }">
                  <span>{{ rowIndex + 1 }}</span>
                </template>
                <template v-else-if="item.title == '货位状态'" #cell="{ record, rowIndex }">
                  <span>{{ record.status == 1 ? '占用' : '空闲' }}</span>
                </template>
                <template v-else-if="item.title == '备注名'" #cell="{ record, rowIndex }">
                  <span class="my-remark cursor fl">{{ record.remark }}</span>
                  <span class="highlight fl" v-if="$authPass('inventory.location.edit')">
                    <icon-edit style="margin-left: 10px" @click="editRemark(record)" />
                  </span>
                </template>
                <template v-else-if="item.title == '已绑定库存'" #cell="{ record, rowIndex }">
                  <div class="highlight">{{ record.skus ? record.skus.split(',').length : 0 }}</div>
                </template>
                <template v-else-if="item.title == '操作'" #cell="{ record, rowIndex }">
                  <div>
                    <!-- <a-button type="text" @click="unBind(record.id)" v-if="$authPass('inventory.location.bind')">清空</a-button> -->
                    <!-- <a-button type="text" style="margin-left: 10px" @click="bind(record)" v-if="$authPass('inventory.location.bind')">绑定库存</a-button> -->
                    <a-button v-if="record.locationCode != 'Z'" type="text" style="color: red" @click="del('single', record)">删除</a-button>
                    <a-button type="text" style="margin-left: 10px" @click="showDetail(record)">详情</a-button>
                  </div>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </template>
      </TableWrap>
      <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </div>

    <BatchAddSpace ref="batch" @save="searchByVal" />
    <SingleAddSpace ref="single" @save="searchByVal" />
    <batchEditRemark ref="remark" :remarkText="remarkText" :ids="selectList" @save="editSuccess" />
    <BindSku ref="bindsku" :detail="detail" @save="sizeChange(20)" />
    <ShowSpaceDetail v-if="showSpeaceDetail" v-model="showSpeaceDetail" :info="detail" @save="getList" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs } from 'vue'
  import { Message, Modal, Table } from '@arco-design/web-vue'
  import { spaceList, deleteLocation, locationCleanInventory } from '@/api/warehouse'
  import FilterTable from '@/components/TableFilter.vue'
  import TableWrap from '@/components/TableWrap.vue'
  import BatchAddSpace from './components/batchAddSpace.vue'
  import SingleAddSpace from './components/singleAddSpace.vue'
  import batchEditRemark from './components/batchEditRemark.vue'
  import BindSku from './components/bindSku.vue'
  import ShowSpaceDetail from './components/showSpaceDetail.vue'
  import _ from 'lodash-es'
  export default defineComponent({
    components: {
      FilterTable,
      TableWrap,
      BatchAddSpace,
      SingleAddSpace,
      batchEditRemark,
      BindSku,
      ShowSpaceDetail,
    },
    setup() {
      const batch = ref()
      const single = ref()
      const remark = ref()
      const table = ref()
      const bindsku = ref()
      const data: any = reactive({
        filterItem: [
          {
            type: 'input_keyword',
            key: 'warehouseName',
            keyItems: [
              { label: '仓库名称', value: 'warehouseName' },
              { label: '仓库ID', value: 'warehouseCode' },
            ],
            keyWidth: '110',
            value: ref(),
            placeholder: '请输入',
            label: '仓库名称',
            width: 160,
            isMultiple: false,
          },
          {
            key: 'locationCode',
            keyWidth: '110',
            label: '货位编号',
            width: 180,
            value: ref(),
            type: 'input_search',
          },
          {
            key: 'shelvesCode',
            keyWidth: '110',
            label: '货架编号',
            width: 180,
            value: ref(),
            type: 'input_search',
          },
          {
            key: 'remark',
            keyWidth: '110',
            label: '备注名',
            width: 180,
            value: ref(),
            type: 'input_search',
          },
          {
            key: 'status',
            keyWidth: '110',
            label: '货位状态',
            value: ref(),
            type: 'select',
            width: 140,
            optionItems: [
              {
                label: '货位状态',
                value: '',
              },
              {
                label: '占用',
                value: '1',
              },
              {
                label: '空闲',
                value: '0',
              },
            ],
          },
        ],
        columns: [
          { title: '序号', dataIndex: '', align: '', width: '' },
          { title: '仓库', dataIndex: 'warehouseName', align: '', width: '' },
          { title: '货架编号', dataIndex: 'shelvesCode', align: '', width: '' },
          { title: '货位编号', dataIndex: 'locationCode', align: '', width: '' },
          { title: '货位状态', dataIndex: '', align: '', width: '' },
          { title: '备注名', dataIndex: '', align: '', width: '' },
          // { title: '库存种类', dataIndex: 'skuType', align: '', width: '' },
          { title: '已绑定库存', dataIndex: 'skus', align: '', width: '' },
          { title: '操作', dataIndex: '', align: '', width: 80 },
        ],
        tableList: [],
        pageNation: { total: 0, pageSize: 20, pageNum: 1 },
        rowSelection: {
          type: 'checkbox',
          showCheckedAll: true,
          onlyCurrent: false,
        },
        selectList: [],
        loading: false,
        remarkText: '',
        detail: {},
        searchValue: {},
        showSpeaceDetail: false,
      })
      const searchByVal = (info: any) => {
        let obj = _.cloneDeep(info)
        data.searchValue = {}
        data.searchValue = obj
        data.pageNation.pageNum = 1
        getList()
      }

      const editRemark = (item?: any) => {
        if (data.selectList.length <= 0 && item == 'mul') {
          return Message.error('请选择需要操作的数据')
        }
        if (item == 'mul') {
          data.remarkText = ''
        } else {
          data.selectList = [item.id]
          data.remarkText = item.remark
        }

        remark.value.visible = true
      }

      const del = (type: string, info: any) => {
        if (type == 'mul' && data.selectList.length <= 0) {
          return Message.error('请选择需要操作的数据')
        }

        Modal.error({
          title: '提示',
          content: '确定要删除吗？',
          titleAlign: 'start',
          cancelText: '取消',
          hideCancel: false,
          onOk: async () => {
            const res: any = await deleteLocation({ ids: type == 'mul' ? data.selectList : [info.id] })
            if (res.code == 'SUCCESS') {
              Message.success('删除成功')
              data.selectList = []
              getList()
            }
          },
        })
      }

      const refresh = () => {
        getList()
      }

      const changePage = (val: number) => {
        data.pageNation.pageNum = val
        getList()
      }

      const sizeChange = (val: number) => {
        data.pageNation.pageNum = 1
        data.pageNation.pageSize = val
        getList()
      }

      const getList = async (info?: any) => {
        data.tableList = []
        let params = {
          ...data.searchValue,
          pageNum: data.pageNation.pageNum,
          pageSize: data.pageNation.pageSize,
        }
        data.loading = true
        const res: any = await spaceList(params)
        if (res.code == 'SUCCESS') {
          data.tableList = res.data.records
          data.pageNation.total = res.data.total
        }
        data.loading = false
      }

      const editSuccess = () => {
        data.selectList = []
        getList()
      }

      const unBind = (id: string) => {
        Modal.error({
          title: '提示',
          content: '是否清空',
          titleAlign: 'start',
          cancelText: '取消',
          hideCancel: false,
          onBeforeOk: async (done) => {
            const res: any = await locationCleanInventory({ id: id })
            if (res.code == 'SUCCESS') {
              done(true)
              Message.success('清空成功')
              getList()
            }
          },
        })
      }

      const bind = (item: any) => {
        data.detail = item
        bindsku.value.visible = true
      }

      const showDetail = (info: any) => {
        data.detail = info
        data.showSpeaceDetail = true
      }

      getList()
      return {
        ...(toRefs(data) as any),
        batch,
        single,
        remark,
        searchByVal,
        changePage,
        sizeChange,
        editRemark,
        del,
        refresh,
        getList,
        editSuccess,
        table,
        unBind,
        bindsku,
        bind,
        showDetail,
      }
    },
  })
</script>

<style lang="less" scoped>
  .spacelist-con {
    width: 100%;
    height: calc(100vh - @menuAndTabHeight);
  }

  .search-con {
    padding: 10px 10px 0 10px;
    background-color: white;
  }

  .my-icon-edit {
    display: none;
  }

  .my-remark {
    &:hover {
      .my-icon-edit {
        display: inline-block !important;
      }
    }
  }
</style>
